<%--
input隐藏边框的样式处理、hover、focus处理

pushlet消息发送(ajax-pushlet-client.js)
快捷键绑定代码(keymaster.min.js)

数据模板的代码(jquery.js)

 --%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/html">

<head>
    <title>商家易|会话</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<style type="text/css">
		#msg-title {
			background-color: transparent;
		    border: 1px solid transparent;
		    border-radius: 0 0 0 0;
		    box-shadow: 0 0;
		    margin-bottom: 0;
	    }
		#msg-title:HOVER {
			background-color: transparent;
		    border: 1px solid #CCCCCC;
		    border-radius: 4px;
		    box-shadow: 0 0;
		    margin-bottom: 0;
	     	border-color: rgba(82, 168, 236, 0.8);
	    }
		#msg-title:FOCUS {
			background-color: #FFFFFF;
		    border: 1px solid #CCCCCC;
		    border-radius: 4px;
		    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
		    margin-bottom: 0;
		    border-color: rgba(82, 168, 236, 0.8);
	    }
	</style>
	<script src="${pageContext.request.contextPath }/resource/js/jquery.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/resource/pushlet/ajax-pushlet-client.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/resource/js/keymaster.min.js"></script>
	
	<script type="text/javascript">
		var subject = "/welink/chat/${userMessageSession.id }";
		function onData(event) {
			var content = event.get('content');
			
			var x = $('#chat-messages-inner').html();
			$('#chat-messages-inner').html(x + '<br>' + content);
		}
		
		//p_join_listen(subject);
		$(function() {
			
			// 发送消息
			$('.btn-send').click(function() {
				var id = $('#msg-id').val();
				var title = $('#msg-title').val();
				var content = $('#msg-box').val();
				var umsf = {
					'id': id,
					'title': title ? title : content // 如果title为空, 使用第一条消息为title
				};
				
				// 如果存在会话id，直接监听会话并发送消息
				// 如果是‘新建会话’(没有会话id)，
				// 就先请求后台新建会话对象，返回会话id，然后监听该会话，发送消息
				if(id) {
					p_join_listen(subject);
					p_publish(subject, 'action', 'send', 'nick', 'san', 'content', content);
				}
				else {
					console.log('1222222');
	
					// 新建会话对象, 新建成功再发送消息
					$.post('${pageContext.request.contextPath}/message/add.htm', umsf, function(data) {
						if(data.id) {
							subject = "/welink/chat/"+data.id;
							p_join_listen(subject);
							
							p_publish(subject, 'action', 'send', 'nick', 'san', 'content', content, 'sessionId', data.id);
							
							$('#msg-id').val(data.id);
							// 第一次发消息, 如果没有填写主题, 就使用第一条消息
							$('#msg-title').val(data.title);
						}
						else {
							// TODO 错误提示
						}
					});
				}
				$('#msg-box').val(''); // 清空内容输入框
			}); // send click
			
			// 内容输入框 绑定 ctrl+enter 事件
			$('#msg-box').keypress(function() {
				if(!$('#msg-box').val()) return;
				if(key.isPressed(13) && key.ctrl) { // enter + ctrl
					$('.btn-send').click();
				}
			}); // send
			
			// 加载可供添加的参与人员
			// ?已添加的禁止添加
			// FIXME 测试用的随便写的方法
			$.post('${pageContext.request.contextPath}/user/getEnterpriseUsers.htm', null, function(data) {
				if(data.list.length > 0) {
		            var template = $('#template');
		            var hasHandler = typeof(valHandler) == 'function';
					$.each(data.list, function(i, obj) {
		              	var temp = template.clone(true).attr('id', '').show();	// 克隆当前数据模板, 清除id, 设置显示
		         		var html = temp.html(), regx;		// 取模板里的html字符串
		              
		              	// 后台传过来的json对象;	key对应json对象的属性, val就是json的val值
		         		$.each(obj, function(key, val) {
		         			if(hasHandler) {
		         				// 对'指定属性'的value进行特殊处理, 如value为空需指定默认值
		         				val = valHandler(key, val);
		         			}
		         			// 动态创建正则
		        			regx = new RegExp('#'+key+'#', 'g');	// 例如：#name#/g 替换所有 #name#
		        			html = html.replace(regx, val || '');	// 如果 val为null, 将原有的#name#占位符替换成''
		         		});
		         		
		         		template.parent().append(temp.html(html));
		         	}); // $.each
				}
				else {
		         	$('#template_nodata').show();
				}
			}); // 加载可供选择的参与人员
			
		}); // $()
		
		// value handler for template
		function valHandler(key, val) {
	    	if(key == 'logo' && !val) {
	    	}
			return val;
		}
	</script>
</head>
<body>

<div id="content">
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span12">
				<div class="widget-box widget-chat">
					<div class="widget-title">
							<span class="icon">
								<i class="icon-comment"></i>
							</span>
						<h5 style="padding-top: 3px;">
							聊天室主题：<input type="text" id='msg-title' value='${userMessageSession.title }' name="msg-box" >
							<input id='msg-id' value='${userMessageSession.id }' style="display: none;">
						</h5>
					</div>
					<div class="widget-content nopadding">
						<div class="chat-content panel-left">
							<div class="chat-messages" id="chat-messages">
								<div id="chat-messages-inner"></div>
							</div>
							<div class="chat-message well">
								<button class="btn btn-success btn-send">发送</button>
								<span class="input-box">
									<input type="text" placeholder="请输入内容...[ctrl+enter]快捷键发送" name="msg-box" id="msg-box" />
								</span>
							</div>
						</div>
						<div class="chat-users panel-right">
							<div class="panel-title">
								<h5>参加人员&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a onclick='showUserDiv()' style='cursor: pointer;'>添加</a></h5>
							</div>
							<div class="panel-content nopadding">
								<ul class="contact-list">
									<li id="user-michelle" class="online new"><a href="#"><img alt="" src="${pageContext.request.contextPath }/resource/img/demo/av1.jpg" /> <span>Michelle</span></a><span class="msg-count badge badge-info">3</span></li>
									<li id="user-neytiri"><a href="#"><img alt="" src="${pageContext.request.contextPath }/resource/img/demo/av2.jpg" /> <span>Neytiri</span></a></li>
									<li id="user-cartoon-man" class="online"><a href="#"><img alt="" src="${pageContext.request.contextPath }/resource/img/demo/av3.jpg" /> <span>Cartoon Man</span></a></li>
									<li id="user-rick-newton" class="online"><a href="#"><img alt="" src="${pageContext.request.contextPath }/resource/img/demo/av1.jpg" /> <span>Rick Newton</span></a></li>
									<li id="user-zack-renson" class="online new"><a href="#"><img alt="" src="${pageContext.request.contextPath }/resource/img/demo/av2.jpg" /> <span>Zack Renson</span></a><span class="msg-count badge badge-info">1</span></li>
									<li id="user-vladimir-ivanov"><a href="#"><img alt="" src="${pageContext.request.contextPath }/resource/img/demo/av3.jpg" /> <span>Wladimir Ivanov</span></a></li>
									<li id="user-master-moda"><a href="#"><img alt="" src="${pageContext.request.contextPath }/resource/img/demo/av1.jpg" /> <span>Master Moda</span></a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 添加参与人员 -->
		<div id="addUser" class="modal hide fade" role="dialog" style="width: 580px">
		    <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		        <h3>添加用户</h3>
		    </div>
		    <div class="modal-body" style="height: 300px; overflow: auto">
		        <ul class="thumbnails" >
                    <li class="span1" id='template' style='display: none;'>
                        <a href="javascript:;" class="thumbnail">
                        	<label for="#id#">
                            	<img src="${pageContext.request.contextPath }/resource/image/users/avatar001.jpg" alt="">
                        	</label>
                        </a>
                        <p style="text-align: center"><input id="#id#" type="checkbox" value="#id#" style="opacity: 1;">#name#</p>
                    </li>
                    <li class="span1" id='template_nodata' style='display: none;'>
                    	吖! 人呢? (没有可供选择的用户)
                    </li>
		        </ul>
		    </div>
		    <div class="modal-footer">
		        <a href="javascript:;" class="btn addUser" onclick='addSessionUser()'>添加</a>
		        <a href="javascript:;" class="btn"  data-dismiss="modal">关闭</a>
		    </div>
		</div>

	</div>
 </div>
</body>
</html>
